//入口文件
//导入 vue 模块
import Vue from "vue"

//1.1导入路由的包
import VueRouter from "vue-router"
//1.2将路由添加到Vue中
Vue.use(VueRouter)

//注册 vuex 
import Vuex from "vuex"//3.1第一步导入 Vuex 包
Vue.use(Vuex)//3.2第二步，在 Vue 中安装 vuex

var car =JSON.parse(localStorage.getItem('car') || '[]')

//3.3第三步创建 Vuex 实例对象
var store =new Vuex.Store({
    state: {
        car: car//将 购物车中的商品的数据，用一个数组存储起来，才 car 数组中，存储一些商品的对象，可以暂时将这个商品对象，设计
        //成这个样子: {id: 商品的id, count: 要购买的数量, pice: 商品的单价, selected: false(商品是否被选中))}
    },
    mutations :{
        addToCar(state,goodsinfo){
            //点击加入购物车，把商品的信息，保存到 store 中的 car 上
            //分析：
            //1.如果购物车中，之前就已经有这个对应的商品，那么，只需要更新数量
            //2.如果没有，则直接把商品数据， push 到 car 中即可
            var flag= false //定义一个变量来判断是否已经加入了购物车
            state.car.some(item =>{
                //判断加入的商品id是否已经存在
                if(item.id== goodsinfo.id){//存在，则只需要增加数量就可以了
                    item.selectedCount +=parseInt(goodsinfo.selectedCount)
                    flag = true
                    return true

                }

            })
            //如果最终，循环完毕，得到的flag 还是 false ，则把商品数据直接push 到购物车中
            if(!flag){//不存在flag为true，条件为真
                state.car.push(goodsinfo)
            }

            //当更新car 之后，把car 数组，存储到本地的 localStorage 中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsInfo(state,goodsinfo){
            //修改购物车中商品的数量值
            state.car.some(item =>{
                if(item.id == goodsinfo.id){
                    item.selectedCount=parseInt(goodsinfo.selectedCount)
                    return true
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))//再次本地持计化
        },
        removeForCar(state,id){
            //根据 id 从 store 中的购物车中删除对应的那条商品数据
            state.car.some((item, i) => {
                if(item == id){
                    state.car.splice(i,1)
                }
                return true
            })
            localStorage.setItem('car',JSON.stringify(state.car))//再次本地持计化
        },
        updateGoodsSelected(state,info){//商品的选中状态
            state.car.some(item => {
                if(item.id == info.id){//当前选中的商品按钮
                    //让当前的状态同步到 store 中
                    item.selected= info.selected
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))//再次本地持计化
        }
        
        
    },
    getters: {//this.$store.getters.***
        //计算微标上的数量
        getAllCount(state){
            var c=0//默认为零
            state.car.forEach(item => {
                c +=parseInt(item.selectedCount)
            })
            return c
            
        },
        getGoodsCount(state){
            var num={}
            state.car.forEach(item =>{
                num[item.id]=item.selectedCount

            })
            return num
        },
        getGoodsSelected(state){//商品是否选中
            var o={}
            state.car.forEach(item =>{
               o[item.id]= item.selected 

            })
            return o
        },
        getGoodsCountNumAllPrice(state){
            //定义一个对象来存储商品勾选的数量以及总价
            var o={
                count: 0,//勾选的数量
                amount: 0//勾选的总价
            }
            state.car.forEach(item => {
                if(item.selected){//判断是否为勾选状态
                //如果被勾选了，则计算勾选的
                o.count +=item.selectedCount
                o.amount +=parseInt(item.pice)*parseInt(item.selectedCount)
                }
                
            })
            return o
        }
        
    }
})



//导入时间格式化的插件
import moment from "moment"
//定义全局时间过滤器
Vue.filter('dataFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
  return  moment(dataStr).format(pattern)
})
//2.2 导入 vue-resource
import VueResource from "vue-resource"
//2.2安装 vue-resource
Vue.use(VueResource)
//设置请求根路径
// Vue.http.options.root='http://vue.com/'

//全局设置 post 请求的时候表单数据格式组织形式 application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true


//导入 MUI 样式
import "./lib/mui/css/mui.css"
//导入MUI icons-extra.css字体图标样式
import "./lib/mui/css/icons-extra.css"

//导入MintUi样式
//这里可以 省略 node_modules 这一层目录
import "mint-ui/lib/style.css"

//按需导入Mint-UI 组件
import { Header, Swipe, SwipeItem,Button,Lazyload,Switch,Search } from "mint-ui"
Vue.component(Header.name, Header)
Vue.component(Swipe.name,Swipe)
Vue.component(SwipeItem.name,SwipeItem)
Vue.component(Button.name,Button)
Vue.use(Lazyload)
Vue.component(Switch.name, Switch)
Vue.component(Search.name, Search)

//1.3导入路由模板
import router from "./router.js"

//图片的缩略图
import VuePreview from 'vue-preview'

// defalut install
Vue.use(VuePreview)

Vue.use(VuePreview, {
    mainClass: 'pswp--minimal--dark',
    barsSize: {top: 0, bottom: 0},
    captionEl: true,
    fullscreenEl: false,
    shareEl: false,
    bgOpacity: 0.85,
    tapToClose: true,
    tapToToggleControls: false
  })

//导入 app 根组件
import app from "./App.vue"
import { format } from "upath";
import { stringify } from "querystring";

//创建Vue 实例
var vm = new Vue({
    el: '#app',
    render: function(createElement){
        return createElement(app)
    },
    router,//1.4挂载路由
    store//3.4第四步挂载 store
})